import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { Button, NavBar } from "antd-mobile";
import $fetch from "../../../utils/app/$fetch";
import "./style.scss";

const ActivityList = () => {
  const [activity, setActivityList] = useState<any>([]);

  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    // await updateActivityList();
    const activityRes: any = await $fetch("event/specialEvent");
    const activity: any = activityRes.filter(
      (item: any) => item?.eventStatus === "1"
    );
    setActivityList(activity);
  };

  const handleLogout = async () => {
    localStorage.removeItem("token");
    localStorage.removeItem("roleType");
    await $fetch("/customer/logout", {}, { method: "post", noGroupId: "no" });
    window.location.replace("/#/login");
  };

  const navigate: any = useNavigate();

  return (
    <div className="container_activity_list">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        right={
          <div
            onClick={() => {
              navigate("/activity/scan", {
                state: { detail: { from: "offline", title: "兑换商品" } },
              });
            }}
          >
            兑换商品
          </div>
        }
      >
        STARSHIPS运营平台
      </NavBar>
      <ul className="that_detail_wraper">
        {activity?.map((item: any) => {
          return (
            <li
              key={item?.eventId}
              onClick={() => {
                navigate("/activity/participates", {
                  state: { detail: { ...item } },
                });
              }}
            >
              <div className="piblic_type">
                <div
                  className={`${
                    item?.eventType === "1" ? "tedian" : "dianqie"
                  }`}
                >
                  {item?.eventType === "1" ? "特典" : "电切"}
                </div>
              </div>
              <div className="item_img">
                <img src={item?.eventPhoto} alt="" />
              </div>
              <div className="item_content">
                <h4>{item?.eventName}</h4>
                <div>时间：{item?.eventTime}</div>
                <div>地点：{item?.eventPlace}</div>
              </div>
            </li>
          );
        })}
      </ul>
      <div className="that_logout">
        <Button onClick={handleLogout}>退出登录</Button>
      </div>
    </div>
  );
};

export default ActivityList;
